import { useRequest } from 'alova/client'
import { VChart } from '@visactor/react-vchart'
import { useState, useEffect, useRef } from 'react'

import { Http } from '../Utils/Api'
import { AdminRouter } from '../Config/default'
import { ChartsConfig } from '../Config/ChartsConfig'
import { getNestedValue, strOfurlParamsFunc } from '../Utils'

const defaultData = [
    { xField: '目标', yField: 0 },
]

const TempChartsA08 = ({ config, apiData }) => {
    const chartRef = useRef()
    const { send } = useRequest(data => Http(data), { immediate: false })
    const [Spec, setSpec] = useState()

    const setSpecFunc = (data) => {
        const { type, axes_setUp, background, padding, outerRadius, innerRadius, startAngle, endAngle, centerY, gauge_color, ...item } = config || AdminRouter.Chart08
        const axes = ChartsConfig.setAxes(axes_setUp)
        const title = ChartsConfig.setTitle(item)
        const tooltip = ChartsConfig.setTooltip(item)
        const gauge = ChartsConfig.setGauge(item)
        const pin = ChartsConfig.setPin(item)
        const pointer = ChartsConfig.setPointer(item)
        const pinBackground = ChartsConfig.setPinBackground(item)
        const indicator = ChartsConfig.setIndicator(item, data || defaultData)
        setSpec({
            layoutRadius: 'auto',
            percent: false,
            type,
            data: [{ values: data || defaultData }, { values: gauge_color }],
            axes,
            background,
            padding,
            outerRadius,
            innerRadius,
            startAngle,
            endAngle,
            centerY,
            categoryField: 'xField',
            valueField: 'yField',
            seriesField: 'xField',
            title,
            tooltip,
            gauge,
            pin,
            pointer,
            pinBackground,
            indicator
        })
    }

    useEffect(() => {
        if (apiData?.length !== 0 && config?.list_apiName) {
            const { list_apiName, list_dataLevel } = config
            const [urlList] = apiData.filter(v => v.name === list_apiName)
            const data = getNestedValue(list_dataLevel, urlList)
            setSpecFunc([{ xField: '目标', yField: Number(data) }])
        } else setSpecFunc()
    }, [config, apiData])

    const optionsData = { disableDirtyBounds: true, options3d: { enable: true, enableView3dTransform: true, center: { x: 500, y: 250 } } }
    if (Spec) return <VChart className='ChartsClass' ref={chartRef} spec={Spec} options={optionsData} />
};

export default TempChartsA08